import React from "react";
import { Routes, Route,useNavigate } from "react-router-dom";
import { Layout, Menu, theme } from "antd";
import Message from "./message";
import Modify from "./modify";
import Order from "./order";
import Going from "./going";
import Finished from './finished';
import Unfinished from "./unfinished";


const { Content, Sider } = Layout;
//添加点击跳转事件（key对应跳转的路由）
// UserCenter组件中的菜单项，将key属性改为子页面的路径
const items1 = [
 {
    label: "我的信息",
    key: "/usercenter/message",
    children: [
      { label: "个人信息", key: '/usercenter/message' },
      { label: "修改信息", key: '/usercenter/modify' },
    ],
  },{
    label: "我的订单",
    key: "/usercenter/order",
    children: [
      { label: "所有订单", key: '/usercenter/order' },
      { label: "进行中", key: '/usercenter/going' },
      { label: "已完成", key: '/usercenter/finished' },
      { label: "待评价", key: '/usercenter/unfinished' },
    ],
  },
];

const UserCenter = () => {
  //添加点击跳转事件（key对应跳转的路由）
  const navigate = useNavigate();

  const handleMenuClick = (key) => {
    console.log(key);
    navigate(key);
  };
  

  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  return (
    <Layout>
      <Layout>
        <Sider
          width={200}
          style={{
            background: colorBgContainer,
          }}
        >
          <Menu
            mode="inline"
            defaultSelectedKeys={["1"]}
            defaultOpenKeys={["sub1"]}
            style={{
              height: "100%",
              borderRight: 0,
            }}
            items={items1}
            onClick={({ key }) => handleMenuClick(key)}
          />
        </Sider>
      
          <Content
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            {/* 在UserCenter组件中，修改Routes组件中的Route路径，确保相对于父路由的路径 */}
            <Routes>
              {/* <Route path="/" element={<UserCenter />}> */}
                <Route path="message" element={<Message />} />
                <Route path="modify" element={<Modify />} />
                <Route path="order" element={<Order />} />
                <Route path="going" element={<Going />} />
                <Route path="finished" element={<Finished />} />
                <Route path="unfinished" element={<Unfinished />} />
              {/* </Route> */}
            </Routes>
          </Content>
       
      </Layout>
    </Layout>
  );
};
export default UserCenter;
